<template>
	<!-- 播放管理/配置终端按钮-->
	<div class="heightMax order publicbox zhongduan">
		<div class="header">
			<el-row :gutter="10">
				<el-col :span="6">
					<span class="font14" style="width: 110px;">电梯注册号</span>
					<el-input size="mini" @keyup.enter.native="find" placeholder="请输入电梯注册号" clearable v-model="liftCode"></el-input>
				</el-col>
				<el-col :span="6">
					<span class="font14">电梯使用单位</span>
					<el-select filterable size="mini" placeholder="请选择电梯使用单位" clearable v-model="useComp">
						<el-option v-for="item in useCompArr" :value="item.name" :key="item.id" :label="item.name"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="font14" style="width: 95px;">外设编号</span>
					<el-input size="mini" @keyup.enter.native="find" placeholder="请输入外设编号" clearable v-model="peripheralCode"></el-input>
				</el-col>
				<el-col :span="1.5">
					<el-button type="primary" icon="el-icon-search" @click='find' size="mini">搜索</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button icon="el-icon-delete" @click='reset' size="mini">重置</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="1.5">
					<div v-if="visible">
						<el-popover placement="bottom" width="400" v-model="showProp" trigger="manual">
							<el-row :gutter="10" class='currentRow1'>
								<el-col :span="11" :offset='1'>
									<span>电梯厂家:</span>
									<el-select v-model="liftFac" size="mini" clearable placeholder="请选择电梯厂家">
										<el-option v-for="item in liftFacArr" :label="item.manufacturer_name" :value="item.manufacturer_code_elevator"
										 :key='item.manufacturer_code_elevator'>
										</el-option>
									</el-select>
								</el-col>
								<el-col :span="11" :offset='1'>
									<span>电梯类型:</span>
									<el-select v-model="liftType" size="mini" clearable placeholder="请选择电梯类型">
										<el-option v-for="item in liftTypeArr" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-col>
							</el-row>
							<el-row :gutter="10" class='currentRow1'>
								<el-col :span="11" :offset='1'>
									<span>外设SIM卡号:</span>
									<el-input v-model="carNum" size="mini" placeholder="请输入外设SIM卡号" clearable></el-input>
								</el-col>
								<el-col :span="11" :offset='1'>
									<span>外设类型:</span>
									<el-select v-model="perNum" size="mini" clearable placeholder="请选择外设类型">
										<el-option v-for="item in perNumArr" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-col>
							</el-row>
							<el-row :gutter="10" class='currentRow1'>
								<el-col :span="11" :offset='1'>
									<span>采集器编号:</span>
									<el-input v-model="gatherCode" size="mini" placeholder="请输入外设SIM卡号" clearable></el-input>
								</el-col>
								<el-col :span="11" :offset='1'>
									<span>电梯出厂编号:</span>
									<el-input v-model="liftLeaveCode" size="mini" placeholder="请输入电梯出厂编号" clearable></el-input>
								</el-col>
							</el-row>
							<el-row :gutter="10" class='currentRow1'>
								<el-col :span="11" :offset='1'>
									<span>维保单位:</span>
									<el-select v-model="mainCom" size="mini" clearable placeholder="请选择维保单位">
										<el-option v-for="item in mainComArr" :key="item.id" :label="item.name" :value="item.name">
										</el-option>
									</el-select>
								</el-col>
								<el-col :span="11" :offset='1'>
									<span>安装位置:</span>
									<el-input v-model="installSite" size="mini" placeholder="请输入安装位置" clearable></el-input>
								</el-col>

								<div class="btnBox">
									<el-button type="primary" size="mini" @click="moviesTableEnter">确定</el-button>
									<el-button size="mini" @click="closeVis">关闭</el-button>
								</div>
							</el-row>
						</el-popover>
					</div>
					<el-button :type="btnType" class='btnMargin' @click='moreDetail' size="mini">更多查询条件</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button size="mini" type="success" :disabled="disableBtn" @click='ensure' v-loading='ensureLoading'>保存</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button size="mini" type="danger" :disabled="removeDisabled" @click='remove'>删除</el-button>
				</el-col>
			</el-row>
		</div>
		<!-- 表格 -->
		<div class="tableBox" style="display: flex;">
			<div style="width: 49%;margin-right: 1%;" class="heightMax">
				<vueScroll>
					<el-table v-loading='loading' :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick"
					 @select-all="selectChange" @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'
					 :row-key='getKey'>
						<el-table-column type="index" min-width="50" fixed>
						</el-table-column>
						<el-table-column type="selection" min-width="50" :reserve-selection='true' fixed>
						</el-table-column>
						<el-table-column label="外设编号">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.device_code_elevator" placement="top">
									<span class="speSpan">{{scope.row.device_code_elevator}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="电梯使用单位">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.property_company_name" placement="top">
									<span class="speSpan">{{scope.row.property_company_name}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="安装位置">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.address" placement="top">
									<span class="speSpan">{{scope.row.address}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="电梯注册号" min-width="120">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.elevator_code" placement="top">
									<span class="speSpan">{{scope.row.elevator_code}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<div class="pag">
						<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
						 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</vueScroll>
			</div>
			<div style="width: 50%;" class="heightMax">
				<vueScroll>
					<el-table v-loading='tableLoading2' :data="tableData1" highlight-current-row ref="moviesTable1" @row-click="rowClick1" @select-all="selectChange1"
					 @selection-change="selectChange1" style="width: 100%" border header-row-class-name='tableHeader' :row-key='getKey1'>
						<el-table-column type="index" min-width="50" fixed>
						</el-table-column>
						<el-table-column type="selection" min-width="50" :reserve-selection='true' fixed>
						</el-table-column>
						<el-table-column label="外设编号">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.device_code_elevator" placement="top">
									<span class="speSpan">{{scope.row.device_code_elevator}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="电梯使用单位">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.property_company_name" placement="top">
									<span class="speSpan">{{scope.row.property_company_name}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="安装位置">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.address" placement="top">
									<span class="speSpan">{{scope.row.address}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="电梯注册号" min-width="120">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.elevator_code" placement="top">
									<span class="speSpan">{{scope.row.elevator_code}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<div class="pag">
						<el-pagination :current-page="page1" :page-sizes="[10, 20, 30, 40]" :page-size="page_size1" layout="total, sizes, prev, pager, next, jumper"
						 :total="total1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
						</el-pagination>
					</div>
				</vueScroll>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading
	} from "@/common.js";
	export default {
		activated() {
			if (this.liftFac || this.liftType || this.carNum || this.perNum || this.gatherCode || this.liftLeaveCode || this.mainCom ||
				this.installSite) {
				this.moreDetail()
			}
		},
		mounted() {
			this.getUserCom()
			this.getTableList()
			this.getTableList1()
		},
		data() {
			return {
				showProp: true,
				//更多过滤
				liftFac: '',
				liftFacArr: [],
				liftType: '',
				liftTypeArr: [{
						value: 10,
						label: '曳引与强制驱动电梯'
					}, {
						value: 20,
						label: '液压驱动电梯'
					},
					{
						value: 30,
						label: '杂物电梯'
					},
					{
						value: 40,
						label: '自动扶梯'
					}
				],
				carNum: '',
				perNum: '',
				perNumArr: [{
						value: '01',
						label: '采集器'
					},
					{
						value: '02',
						label: '摄像头'
					},
					{
						value: '03',
						label: '高清屏'
					}
				],
				gatherCode: '',
				liftLeaveCode: '',
				mainCom: '',
				mainComArr: [],
				installSite: '',
				total: 10,
				total1: 10,
				page: 1,
				page1: 1,
				page_size: 10,
				page_size1: 10,
				liftCode: "",
				useComp: '',
				useCompArr: [],
				peripheralCode: '',
				visible: false,
				loading: true,
				tableData: [],
				tableData1: [],
				disableBtn: true,
				//弹窗
				detailShow: false,
				addAndCompileShow: false,
				isAddOrComp: 1,
				deleteArr: [],
				rowId: '',
				btnType: 'primary',
				currentTable1: [],
				ensureLoading: false,
				tableLoading2: false,
				removeDisabled: true,
			}
		},
		computed: {
			BroadcastManageId() {
				if (localStorage.BroadcastManageId) {
					return JSON.parse(localStorage.BroadcastManageId).id
				} else {
					return ''
				}
			},
			role() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
		},
		methods: {
			getKey(row) {
				return row.id
			},
			getKey1(row) {
				return row.id
			},
			closeVis() {
				this.visible = false
				this.public()
			},
			public() {
				if (this.liftFac || this.liftType || this.carNum || this.perNum || this.gatherCode || this.liftLeaveCode || this.mainCom ||
					this.installSite) {
					this.btnType = 'warning'
				} else {
					this.btnType = 'primary'
				}
			},
			moreDetail() {
				this.visible = true
			},
			getUserCom() {
				axiosGet('/manu/collection/company/', {}, (res) => {
					if (res.code == 0) {
						this.useCompArr = res.detail.property_company
						this.liftFacArr = res.detail.ec
						this.mainComArr = res.detail.maintain_company
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//更多搜索条件 确定按钮
			moviesTableEnter() {
				this.visible = false
				this.getTableList()
			},
			//获取表格数据
			getTableList() {
				this.public()
				this.loading = true
				this.disableBtn = true
				let params = {
					play_queue: this.BroadcastManageId,
					page: this.page,
					page_size_count: this.page_size,
					elevator_code: this.liftCode,
					property_company_name: this.useComp,
					device_code_elevator: this.peripheralCode,
					manufacturer_code_elevator: this.liftFac,
					elevator_type: this.liftType,
					sim_no: this.carNum,
					device_type: this.perNum,
					collection_num: this.gatherCode,
					manufacturer_number_elevator: this.liftLeaveCode,
					maintain_company: this.mainCom,
					address: this.installSite
				}
				axiosGet('/res/queue/elevator/', params, (res) => {
					this.loading = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							if (item.elevator_type == 10) {
								item.elevator_type_name = '曳引与强制驱动电梯'
							} else if (item.elevator_type == 20) {
								item.elevator_type_name = '液压驱动电梯'
							} else if (item.elevator_type == 30) {
								item.elevator_type_name = '杂物电梯'
							} else if (item.elevator_type == 40) {
								item.elevator_type_name = '自动扶梯'
							}
							if (item.device_type == '01') {
								item.device_type_name = '采集器'
							} else if (item.device_type == '02') {
								item.device_type_name = '摄像头'
							} else if (item.device_type == '03') {
								item.device_type = '高清屏'
							}
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			getTableList1() {
				this.tableLoading2 = true
				this.removeDisabled = true
				let params = {
					play_queue: this.BroadcastManageId,
					page: this.page1,
					page_size_count: this.page_size1,
					allocated: 1,
				}
				axiosGet('/res/queue/elevator/', params, (res) => {
					this.tableLoading2 = false
					if (res.code == 0) {
						this.total1 = res.detail.count
						this.tableData1 = res.detail.results
						this.tableData1.map((item) => {
							if (item.elevator_type == 10) {
								item.elevator_type_name = '曳引与强制驱动电梯'
							} else if (item.elevator_type == 20) {
								item.elevator_type_name = '液压驱动电梯'
							} else if (item.elevator_type == 30) {
								item.elevator_type_name = '杂物电梯'
							} else if (item.elevator_type == 40) {
								item.elevator_type_name = '自动扶梯'
							}
							if (item.device_type == '01') {
								item.device_type_name = '采集器'
							} else if (item.device_type == '02') {
								item.device_type_name = '摄像头'
							} else if (item.device_type == '03') {
								item.device_type = '高清屏'
							}
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//行选中
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			rowClick1(row, column, event) {
				this.$refs.moviesTable1.toggleRowSelection(row)
			},
			//选中多行
			selectChange(res) {
				console.log(res)
				this.currentTable1 = res
				if (res.length == 0) {
					this.disableBtn = true
					this.rowId = res[0].id
				} else {
					this.disableBtn = false
				}
			},
			selectChange1(res) {
				this.deleteArr = res
				if (res.length == 0) {
					this.removeDisabled = true
				} else {
					this.removeDisabled = false
				}
			},
			//搜索
			find() {
				this.page = 1
				this.page_size_count = 10
				this.getTableList()
			},
			//重新加载
			reset() {
				this.public()
				this.page = 1
				this.page_size_count = 10
				this.liftCode = ''
				this.useComp = ''
				this.peripheralCode = ''
				this.liftFac = ''
				this.liftType = ''
				this.carNum = ''
				this.perNum = ''
				this.gatherCode = ''
				this.liftLeaveCode = ''
				this.mainCom = ''
				this.installSite = ''
				this.getTableList()
			},
			//分页器数量变化
			handleSizeChange(currentSize) {
				this.page_size = currentSize
				this.getTableList()
			},
			handleSizeChange1(currentSize) {
				this.page_size1 = currentSize
				this.getTableList1()
			},
			//分页器页数变化
			handleCurrentChange(currentPage) {
				this.page = currentPage
				this.getTableList()
			},
			handleCurrentChange1(currentPage) {
				this.page1 = currentPage
				this.getTableList1()
			},
			remove() {
				let ids = this.deleteArr.map(item => {
					return item.id
				})
				this.removeAlert('此操作将永久删除此配置终端, 是否继续?', () => {
					let data = {
						play_queue: this.BroadcastManageId,
						relation: ids
					}
					this.axiosChange('/res/queue/relation/', 'delete', data, (res) => {
						if (res.code == 0) {
							this.getTableList1()
							this.getTableList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				})
			},
			ensure() {
				this.ensureLoading = true
				let ids = this.currentTable1.map((item) => {
					return item.id
				})
				let data = {
					play_queue: this.BroadcastManageId,
					relation: ids
				}
				this.axiosPost('/res/queue/relation/', data, (res) => {
					this.ensureLoading = false
					if (res.code == 0) {
						this.getTableList1()
						this.getTableList()
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//多删除
			allDelete() {
				let newdeleteArr = this.deleteArr.map(item => {
					return item.id
				})
				let data = {
					ele_ids: newdeleteArr
				}
				axiosDelete('/basic/elevator/', data, (res) => {
					console.log(res)
					if (res.code == 0) {
						this.$message({
							type: 'success',
							message: '删除成功'
						})
						this.loading = true
						this.getTableList()
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			deleteList(value) {
				this.$confirm('此操作将永久删除此外设, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (value == 1) {
						this.oneDelete()
					} else {
						this.allDelete()
					}
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="less" scoped>
	.pag {
		margin-top: 10px;
	}

	.tableBox {
		height: 80%;
		overflow-y: auto;
	}

	.ball {
		width: 21px;
		height: 21px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.el-col-6 {
		display: flex;
		flex-direction: row;
		align-items: center;

		span {
			width: 150px;
		}
	}

	.currentRow1 {
		.el-col {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 5px;

			span {
				width: 140px;
				display: inline-block;
				text-align: right;
				margin-right: 5px;
			}
		}

		.btnBox {
			text-align: center;
			margin-top: 40px;
		}
	}

	.btnMargin {
		margin-left: 5px;
	}
</style>
